Tengo una nueva instalación de Laravel. Al compilar archivos usando npm run dev VUE , aparece un error de archivo
"Es posible que necesite un cargador apropiado para manejar este tipo de archivo, actualmente no hay cargadores configurados para procesar este archivo"
Versión de Laravel : "^8.12"
Paquete.json
"devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "vue": "^2.5.17", "vue-loader": "^15.9.6", "vue-template-compiler": "^2.6.10" }archivo de hoja
<div id="app"> <hello></hello> </div> <script src="{{mix('js/app.js')}}"></script>aplicación.js
require('./bootstrap'); import Vue from 'vue' Vue.component('hello', require('./hello.vue').default); const app = new Vue({ el: '#app' });Hola.vue
<template> <div> Hello World! </div> </template> <script> export default { } </script>npm ejecutar dev
Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <template> | <div> | Hello World!como está usando laravel-mix 6 , tiene una configuración diferente para webpack.mix.js
usa .vue()
const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. | */ mix.js('resources/js/app.js', 'public/js').vue() .postCss('resources/css/app.css', 'public/css', [ // ]);enlace de referencia https://laravel-mix.com/docs/6.0/upgrade
Si alguien todavía encuentra este problema, así descubro la causa en mi caso y en realidad es un problema de configuración de Laravel mix 6 para el soporte de Vue.
Puede consultar la documentación para obtener más detalles: Documentación de actualización de Laravel mix 6
Pero déjame explicarlo brevemente aquí...
Estaba usando Laravel mix 6 (probablemente puedas usar lo mismo si creaste un nuevo proyecto de Laravel 8) y, según su documentación oficial, " Laravel Mix 6 se envía con soporte para las últimas versiones de numerosas dependencias, incluido webpack 5, PostCSS 8, Vue Loader 16, y más ". Por lo tanto, no es necesario que agregue vue loader aunque el error lo indique.
Más bien, debe decirle explícitamente a Laravel mix 6 que admita vue, aquí lo que dicen " Laravel Mix se creó originalmente para ser bastante obstinado. Una de estas opiniones fue que el soporte de Vue debe proporcionarse de forma inmediata. Cualquier llamada a mix.js() vendría instantáneamente con el beneficio de los componentes de un solo archivo de Vue .
Aunque no estamos eliminando el soporte de Vue de ninguna manera, hemos extraído Vue a su propia "bandera destacada" : mix.vue() .
Aquí lo que hice.
Primera opción
// You can simply use this mix.js('resources/js/app.js', 'public/js') .vue() .postCss('resources/css/app.css', 'public/css', [ // ]);Segunda opción
// Or this if you want to extract styles as well // Feel free to check the documentation for more customisations mix.js('resources/js/app.js', 'public/js') .vue({ extractStyles: true, globalStyles: false }) .postCss('resources/css/app.css', 'public/css', [ // ]);En primer lugar, gracias a Paul por esta aclaración que me salvó la tarde :)
Después de eso, la compilación me funcionó, pero apareció un error en la consola cuando recargué la página:
Vue.use is not a functionPara aquellos que estarían en el mismo caso, en su archivo app.js, deben reemplazar la línea:
window.Vue = require('vue');Con :
window.Vue = require('vue').default;aquí lo hago con algún problema
mix.js('resources/js/app.js', 'public/js').vue() .sass('resources/sass/app.scss', 'public/css') .sourceMaps();mix.js('resources/js/app.js', 'public/js').vue() .postCss('resources/css/app.css', 'public/css', [ // ]);
O
npm install vue-template-compiler vue-loader@^15.9.7 --save-dev --legacy-peer-deps
prueba ambos..